<template>
  <div class="drawer-container">
    <!-- 遮罩层 -->
    <!-- @click="closeDrawer" -->
    <!-- <div class="drawer-mask"></div> -->

    <div class="drawer drawer-open">
      <div class="drawer-header">
        <h3>节点设置</h3>
        <i class="el-icon-delete big-icon" @click="delNode"></i>
        <button @click="closeDrawer" class="close-btn">&#10005;</button>
      </div>

      <div class="drawer-body">
        <el-form ref="form" :model="localData" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="localData.label"></el-input>
          </el-form-item>
        </el-form>
        <dynamic-form :config="this.localData.params" :modelValue="formData" v-model="formData"
          @submit="handleSubmit" />
      </div>

      <!-- <div class="drawer-footer">
        <el-button @click="closeDrawer" class="btn-cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="btn-confirm">确定</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import DynamicForm from '@/components/DynamicForm/index.vue';
export default {
  name: "CustomDrawer",
  props: {
    data: Object,
  },
  components: {
    DynamicForm
  },
  mounted() {
    console.log(this.localData);
  },
  data() {
    return {
      formData: JSON.parse(JSON.stringify(this.data.data.args || {})),
      localData: JSON.parse(JSON.stringify(this.data)),
    };
  },
  methods: {
    // 删除节点
    delNode() {
      this.$emit("delNode", this.localData.id);
    },
    // 处理提交的数据
    handleSubmit(data) {
      this.localData.data.args = data;
      this.$emit("nodeSubmit", this.localData.id, this.localData.label, data);
    },
    closeDrawer() {
      this.$emit("close");
    },
    handleConfirm() {
      this.$emit("confirm", this.localData);
      this.closeDrawer();
    },
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = JSON.parse(JSON.stringify(newVal));
        }
      },
      immediate: false,
    },
  },
  // 组件销毁时确保恢复页面滚动
  beforeDestroy() {
    document.body.style.overflow = "";
  },
};
</script>

<style scoped>
/* 抽屉容器 */
.drawer-container {
  position: relative;
  z-index: 1000;
  /* 确保在最上层 */
}

/* 遮罩层 */
.drawer-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明黑色 */
  z-index: 1001;
  transition: opacity 0.3s ease;
}

.drawer-mask {
  opacity: 1;
}

/* 抽屉主体 */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  /* 初始位置在屏幕右侧外 */
  width: 350px;
  /* 可根据需要调整宽度 */
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  /* 左侧阴影 */
  z-index: 1002;
  transition: right 0.3s ease;
  /* 关键：对 right 属性进行动画 */
  /* 初始状态：隐藏在屏幕外 */
  right: -300px;
  /* 必须与 width 一致 */
}

/* 抽屉打开状态 */
.drawer-open {
  right: 0;
  background-color:#1f1f1f;
  /* 滑动到 right: 0 的位置 */
}

/* 抽屉头部 */
.drawer-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--ui-border-color-base);
}

.drawer-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #666;
}

/* 抽屉内容 */
.drawer-body {
  padding: 15px;
  height: calc(100% - 57px);
  /* 减去 header 和 footer 的高度 (假设各 56px) */
  overflow-y: auto;
}

/* 抽屉底部 */
.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  border-top: 1px solid var(--ui-border-color-base);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* .btn-cancel,
.btn-confirm {
  padding: 8px 16px;
  border: 1px solid var(--ui-border-color-base);
  border-radius: 4px;
  background-color:var(--ui-component-background);
  cursor: pointer;
  font-size: 14px;
}

.btn-cancel:hover {
  background-color: #f5f5f5;
}

.btn-confirm {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.btn-confirm:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
} */
.big-icon {
  font-size: 20px;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 50px;
}
</style>
